<div id="no-book-content" class="set-display-none">
  <div id="home-screen"></div>
</div>

<div id="page-number-bubble"></div>
<div id="clock-bubble"></div>
<div id="battery-bubble"></div>

<div
  id="info-anchor-topleft"
  class="info-anchor info-anchor-top info-anchor-left"
></div>
<div
  id="info-anchor-topcenter"
  class="info-anchor info-anchor-top info-anchor-center"
></div>
<div
  id="info-anchor-topright"
  class="info-anchor info-anchor-top info-anchor-right"
></div>

<div
  id="info-anchor-bottomleft"
  class="info-anchor info-anchor-bottom info-anchor-left"
></div>
<div
  id="info-anchor-bottomcenter"
  class="info-anchor info-anchor-bottom info-anchor-center"
></div>
<div
  id="info-anchor-bottomright"
  class="info-anchor info-anchor-bottom info-anchor-right"
></div>

<nav id="toolbar">
  <div class="toolbar-item" id="toolbar-button-open">
    <a href="" id="toolbar-button-open-href" title="open file"
      ><i class="fas fa-folder-open"></i
    ></a>
  </div>
  <div class="toolbar-item-separator"></div>

  <div id="toolbar-page-slider-div">
    <input
      type="range"
      min="1"
      max="50"
      value="1"
      class="slider"
      id="toolbar-page-slider-input"
    />
  </div>
  <div id="toolbar-page-numbers">00 / 00</div>
  <div class="toolbar-item-separator"></div>

  <div id="toolbar-arrow-buttons">
    <div class="toolbar-item" id="toolbar-button-left">
      <a href="" id="toolbar-button-left-href" title="go left"
        ><i class="fas fa-chevron-left"></i
      ></a>
    </div>
    <div class="toolbar-item-separator"></div>
    <div class="toolbar-item" id="toolbar-button-right">
      <a href="" id="toolbar-button-right-href" title="go right"
        ><i class="fas fa-chevron-right"></i
      ></a>
    </div>
  </div>

  <div class="toolbar-item-separator"></div>
  <div class="toolbar-item" id="toolbar-button-set-pagemode-0">
    <a href="" id="toolbar-button-set-pagemode-0-href" title="set page mode 0"
      ><i class="fa-solid fa-file"></i
    ></a>
  </div>
  <div class="toolbar-item set-display-none" id="toolbar-button-set-pagemode-1">
    <a href="" id="toolbar-button-set-pagemode-1-href" title="set page mode 1">
      <i class="fa-solid fa-file fa-flip-horizontal"></i
      ><i class="fa-solid fa-file"></i>
    </a>
  </div>
  <div class="toolbar-item set-display-none" id="toolbar-button-set-pagemode-2">
    <a href="" id="toolbar-button-set-pagemode-2-href" title="set page mode 2">
      <i class="fa-solid fa-file"></i>
      <div class="toolbar-icons-break"></div>
      <i class="fa-solid fa-file fa-flip-horizontal"></i
      ><i class="fa-solid fa-file"></i>
    </a>
  </div>

  <div class="toolbar-item-separator"></div>
  <div class="toolbar-item" id="toolbar-button-set-pagesdirection-ltr">
    <a
      href=""
      id="toolbar-button-set-pagesdirection-ltr-href"
      title="set ltr pages direction"
      ><i class="fas fa-long-arrow-alt-right"></i
    ></a>
  </div>
  <div class="toolbar-item" id="toolbar-button-set-pagesdirection-rtl">
    <a
      href=""
      id="toolbar-button-set-pagesdirection-rtl-href"
      title="set rtl pages direction"
      ><i class="fas fa-long-arrow-alt-left"></i
    ></a>
  </div>

  <div class="toolbar-item-separator"></div>
  <div class="toolbar-item" id="toolbar-button-fit-to-height">
    <a href="" id="toolbar-button-fit-to-height-href" title="fit to height"
      ><i class="fas fa-arrows-alt-v"></i
    ></a>
  </div>
  <div class="toolbar-item" id="toolbar-button-fit-to-width">
    <a href="" id="toolbar-button-fit-to-width-href" title="fit to width"
      ><i class="fas fa-arrows-alt-h"></i
    ></a>
  </div>

  <div class="toolbar-item-separator"></div>
  <div class="toolbar-item" id="toolbar-button-rotate-counterclockwise">
    <a
      href=""
      id="toolbar-button-rotate-counterclockwise-href"
      title="rotate counterclockwise"
      ><i class="fas fa-undo-alt"></i
    ></a>
  </div>
  <div class="toolbar-item-separator"></div>
  <div class="toolbar-item" id="toolbar-button-rotate-clockwise">
    <a
      href=""
      id="toolbar-button-rotate-clockwise-href"
      title="rotate clockwise"
      ><i class="fas fa-redo-alt"></i
    ></a>
  </div>

  <div class="toolbar-item-separator"></div>
  <div class="toolbar-item" id="toolbar-button-fullscreen-enter">
    <a
      href=""
      id="toolbar-button-fullscreen-enter-href"
      title="enter fullscreen mode"
      ><i class="fas fa-expand"></i
    ></a>
  </div>

  <div
    class="toolbar-item set-display-none"
    id="toolbar-button-fullscreen-exit"
  >
    <a
      href=""
      id="toolbar-button-fullscreen-exit-href"
      title="exit fullscreen mode"
      ><i class="fas fa-compress"></i
    ></a>
  </div>
</nav>

<div id="pages-container"></div>

<div id="loading">
  <div id="loading-bg"><div id="loading-spinner"></div></div>
</div>
